<template>
  <div class="com-container">
    <div class="com-chart" ref="provincemap"></div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Lose_user",
  data() {
    return {
      mychart: null,
      allData: null, //服务器返回的数据
    };
  },
  created() {
    //在组件创建完成之后进行回调函数的注册
    this.$socket.registerCallBack("mapData", this.getData);
  },
  mounted() {
    this.initChart();
    //this.getData();
    //发送数据给服务器，对服务器请求数据
    this.$socket.send({
      action: "getData",
      socketType: "mapData",
      chartName: "province_login",
      value: "",
    });
    window.addEventListener("resize", this.screenAdapter);
    //在页面加载完成的时候，主动进行屏幕的适配
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    //在组件销毁之后进行回调函数的取消
    this.$socket.unRegisterCallBack("mapData");
  },
  methods: {
    async initChart() {
      this.mychart = this.$echarts.init(this.$refs.provincemap, this.theme);
      //获取中国地图的矢量数据
      const ret = await axios.get(
        "http://localhost:8081/static/utils/map/china.json"
      );
      this.$echarts.registerMap("china", ret.data);
      const initOption = {
        geo: {
          map: "china",
          type: "map",
        },
        visualMap: {
          min: 0,
          max: 120887,
          left: "left",
          top: "bottom",
          calculable: true,
          inRange: {
            color: [
              "#4EFEB3",
              "#97CBFF",
              "#00FFFF",
              "#6A6AFF",
              "#D200D2",
              "#FF0080",
            ], //取值范围的颜色
          },
          show: true, //图注
          textStyle: {
            color: "#ffffff",
          },
        },
        title: {
          text: "▎全国省份用户分布",
          left: 20,
          top: 20,
        },
        grid: {
          top: "30%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true, //距离是包含坐标轴上的文字
        },
        tooltip: {},
        series: [
          {
            name: "中国",
            type: "map",
            mapType: "china",
            zoom: 1,
            geoIndex: 0,
            label: {
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)",
              },
              emphasis: {
                areaColor: "#B15BFF", //鼠标选择区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.mychart.setOption(initOption);
    },
    getData(ret) {
      //const ret = await this.$http.get("province_login");
      console.log(ret, "province_login");
      this.allData = ret;
      this.updateChart();
    },
    updateChart() {
      const datalist = this.allData;
      const dataOption = {
        series: [
          {
            type: "map",
            data: datalist,
          },
        ],
      };
      this.mychart.setOption(dataOption);
    },
    //当浏览器的大小发生变化时，调用该方法，完成屏幕的适配
    screenAdapter() {
      const titleFontSize = (this.$refs.provincemap.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: { fontSize: titleFontSize },
        },
        visualMap: {
          textStyle: { fontSize: titleFontSize },
        },
      };
      this.mychart.setOption(adapterOption);
      //手动调用图表对象的resize
      this.mychart.resize();
    },
  },
  computed: {
    ...mapState(["theme"]),
  },
  watch: {
    theme() {
      this.mychart.dispose(); //销毁当前图表
      this.initChart(); //重新以最新主题初始化图表对象
      this.screenAdapter();
      this.updateChart();
    },
  },
};
</script>

<style>
</style>